<template>
	<view>
		<!-- 自定义导航栏 -->
		<z-nav-bar transparentFixedFontColor="#FFF" type="transparentFixed" title="活动详情"></z-nav-bar>
		<!-- 轮播图区域 -->
		<u-swiper
				:list="activityData['images']"
				indicator
				indicatorMode="line"
				circular
				height="460rpx"
				indicatorStyle="right:30rpx;bottom:60rpx;"
		></u-swiper>
		<view class="main">
			<view class="main-head">
				<view class="main-head-con flex align-item">
					<view class="main-head-con-logo">
						<image :src="hunlianLogoUrl" mode=""></image>
					</view>
					<view class="main-head-con-info">
						<view class="main-head-con-info-tit">
							{{ activityData.title || '' }}
						</view>
						<view class="main-head-con-info-subtit">
							{{ activityData.subtitle || '' }}
						</view>
					</view>
				</view>
				<view class="main-head-detail flex align-item j-between">
					<view class="main-head-detail-left">
						<view class="flex align-item">
							<view class="">
								已报名：
							</view>
							<view class="con-t">
								{{ activityData.sign_up_num || 0 }}
							</view>
							<view class="">
								/{{ activityData.activity_num || '' }}人
							</view>
						</view>
						<view class="flex align-item info-time">
							<view class="">
								报名时间：
							</view>
							<view class="">
								{{activityData.sign_up_start_time || ''}} -- {{activityData.sign_up_end_time}}
							</view>
						</view>
						<view class="flex align-item info-time">
							<view class="">
								活动开始时间：
							</view>
							<view class="">
								{{ activityData.start_time || '' }}
							</view>
						</view>
						<view class="flex align-item">
							<view class="">
								地址：
							</view>
							<view class="">
								{{ activityData.address || '' }}
							</view>
						</view>
					</view>
					<view class="main-head-detail-right flex align-item column" @click="goMap">
						<image class="daohang-logo" :src="imgUrl + 'static/web/icon/daohang.png'" mode=""></image>
						<view class="">
							地址导航
						</view>
					</view>
				</view>
			</view>
			<view class="main-con">
				<u-parse :content="activityData.content" :lazyLoad="true"></u-parse>
				<view class="foot-btn flex align-item">
					<view class="btn-com btn-baoming" v-if="activityData.type == '去报名'" @click="goSignUp">
						{{ activityData.is_charge == 1 ? activityData.sign_up_price + '元' : '免费' }}报名
					</view>
					<view class="btn-com btn-weikaishi" v-if="activityData.type == '未开始'">
						未开始
					</view>
					<view class="btn-com btn-weikaishi" v-if="activityData.type == '已结束'">
						已结束
					</view>
					<view class="btn-com btn-weikaishi" v-if="activityData.type == '已报名'">
						已报名
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	// #ifdef H5
	// import { wxPublicPay } from '@/config/html5Utils.js'
	// #endif
	import { setZhPay } from '@/config/utils.js'
	export default {
		data() {
			return {
				imgUrl: this.$http.baseUrl, // 服务器域名
				activity_id: '', // 活动id
				activityData: [], // 存储活动详情信息
				uData: {}, // 用户id
				hunlianLogoUrl: '',
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			...mapMutations(['setWebViewUrl']),
			getActivityData(){
				var that = this
				that.$http.get('api/ZhActivity/view',{
					'activity_id': that.activity_id
				}).then(res => {
						if(res){
							that.activityData = res
						}
					});
			},
			// 去地图导航
			goMap(){
				var that = this
				// #ifdef MP-WEIXIN || APP-PLUS
				uni.openLocation({
					latitude: Number(that.activityData.coordinate.latitude),
					longitude: Number(that.activityData.coordinate.longitude),
					success: function (e) {
						console.log(e)
						console.log('success','成功');
					},
					fail: function(err){
						console.log(err,'失败')
					}
				});
				// #endif
				// #ifdef H5
				window.location.href =  "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + that.activityData.coordinate.latitude + "," + that.activityData.coordinate.longitude
				// #endif
			},
			// 去报名
			goSignUp(){
				var that = this
				if(!that.uData){
					uni.showToast({
					    title: '请前往授权登录',
						icon: 'none',
					    duration: 1000
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/my/my'
						});
					}, 1000);
				}else if(that.uData && !that.uData['is_auth']){
					uni.showToast({
					    title: '请前往认证',
						icon: 'none',
					    duration: 1000
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/release/bonus_item/bonus_item'
						});
					}, 1000);
				}else{
					var type = ''
					// #ifdef MP-WEIXIN
					type = 'wx'
					// #endif
					// #ifdef APP-PLUS
					type = 'app'
					// #endif
					// #ifdef H5
					type = 'H5'
					if(this.isWxBrowser){
						type = 'H5-wx'
					}
					// #endif
					that.$http.post('api/ZhSignUp/add',{
						'activity_id': that.activity_id,
						'sign_up_price':that.activityData.sign_up_price,
						'is_charge':that.activityData.is_charge,
						'type': type
					}).then(res=>{
						if(res){
							if(that.activityData.is_charge == 1){
								setZhPay(res.paydata,()=>{
									uni.showToast({
										title:'报名成功',
										icon: 'none'
									})
									setTimeout(function() {
										uni.navigateBack({
											
										})
									}, 1000);
								})
								// // #ifdef MP-WEIXIN
								// uni.requestPayment({
								// 	provider: 'wxpay',
								// 	timeStamp: res.paydata.timestamp,
								// 	nonceStr: res.paydata.nonceStr,
								// 	package: res.paydata.package,
								// 	signType: res.paydata.signType,
								// 	paySign: res.paydata.paySign,
								// 	success: function (res) {
								// 		uni.showToast({
								// 			title:'报名成功',
								// 			icon: 'none'
								// 		})
								// 		setTimeout(function() {
								// 			uni.navigateBack({
												
								// 			})
								// 		}, 1000);
								// 	},
								// 	fail: function (err) {
								// 		console.log('fail:' + JSON.stringify(err));
								// 	}
								// });
								// // #endif
								
								// // #ifdef APP
								// uni.requestPayment({
								// 	provider: 'wxpay',
								// 	orderInfo: res.paydata;
								// 	success: function (res) {
								// 		uni.showToast({
								// 			title:'报名成功',
								// 			icon: 'none'
								// 		})
								// 		setTimeout(function() {
								// 			uni.navigateBack({
												
								// 			})
								// 		}, 1000);
								// 	},
								// 	fail: function (err) {
								// 		console.log('fail:' + JSON.stringify(err));
								// 	}
								// });
								// // #endif
								
								// // #ifdef H5
								// if(this.isWxBrowser){
								// 	wxPublicPay(res.paydata,()=>{
								// 		uni.showToast({
								// 			title:'报名成功',
								// 			icon: 'none'
								// 		})
								// 		setTimeout(function() {
								// 			uni.navigateBack({
												
								// 			})
								// 		}, 1000);
								// 	})
								// }else{
								// 	window.location.href = res.paydata + '&redirect_url=' + decodeURIComponent(location.href)
								// }
								// // #endif
							}else{
								uni.showToast({
									title:'报名成功',
									icon: 'none'
								})
								setTimeout(function() {
									uni.navigateBack({
										
									})
								}, 1000);
							}
						}
					})
				}
			}
		},
		onLoad(e) {
			this.hunlianLogoUrl = this.$base.logoUrl
			this.activity_id = e.activity_id
			this.getActivityData()
			var userInfo = this.$store.state.userInfo
			this.uData = userInfo
		},
	}
</script>
<style>
page {
	background-color: #F9F9F9;
}
</style>
<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-item {
	align-items: center;
}
.j-between {
	justify-content: space-between;
}
.column {
	flex-direction: column;
}
.main {
	position: relative;
	margin-top: -30rpx;
	.main-head {
		background-color: #FFFFFF;
		padding: 40rpx 30rpx 48rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.main-head-con {
			.main-head-con-logo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.main-head-con-info {
				margin-left: 24rpx;
				.main-head-con-info-tit {
					font-size: 40rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #000013;
					margin-bottom: 20rpx;
				}
				.main-head-con-info-subtit {
					font-size: 28rpx;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #6A6A7E;
				}
			}
		}
		.main-head-detail {
			margin-top: 38rpx;
			.main-head-detail-left {
				font-size: 26rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #000013;
				.info-time {
					margin: 20rpx 0;
				}
				.con-t {
					color: #7F5AFF;
				}
			}
			.main-head-detail-right {
				font-size: 26rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #000013;
				.daohang-logo {
					width: 64rpx;
					height: 64rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	.main-con {
		padding: 30rpx 30rpx 140rpx;
		background-color: #fff;
		margin-top: 30rpx;
	}
	.foot-btn {
		position: fixed;
		bottom: 30rpx;
		justify-content: center;
		margin-top: 40rpx;
		width: 100%;
		padding-right: 60rpx;
		.btn-com {
			width: 80%;
			height: 80rpx;
			border-radius: 16rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		.btn-baoming {
			background: #7F5AFF;
		}
		.btn-weikaishi {
			background: #BEC6D3;
		}
	}
}
</style>
